<template id="HelloWorld">
  <div class="hello">
    <!--头像和昵称-->
    <div class="myInfo-header">
      <div class="my-pic">
        <input class="btn-addPic" type="file" accept="image/png,image/jpg">
        <img class="myPic" src="../../assets/image/my_pic.png" alt="个人头像">
      </div>
      <p class="my-nickname">中银大厦</p>
    </div>
    <!--个人信息列表-->
    <div class="myInfo-content">
      <ul class="myInfo-list">
        <li class="myInfo-item row" @click="goPage('/mine/myInfo_pay')">
            <i class="icon iconfont icon-1"></i>
            <span class="col_333">我的缴费</span>
            <i class="icon iconfont icon-shangyiye-copy"></i>
        </li>
        <li class="myInfo-item row" @click="goPage('/mine/myNew')">
          <i class="icon iconfont icon-xinfeng"></i>
          <span class="col_333">我的消息</span>
          <i class="icon iconfont icon-shangyiye-copy"></i>
        </li>
        <li class="myInfo-item row" @click="goPage('/mine/myInfo_wallet')">
          <i class="icon iconfont icon-qianbao"></i>
          <span class="col_333">我的钱包</span>
          <i class="icon iconfont icon-shangyiye-copy"></i>
        </li>
        <li class="myInfo-item row" @click="goPage('/mine/myInfo_setting')">
          <i class="icon iconfont icon-shezhi"></i>
          <span class="col_333">我的设置</span>
          <i class="icon iconfont icon-shangyiye-copy"></i>
        </li>
        <li class="myInfo-item row" @click="goLoginOut('/')">
          <i class="icon iconfont icon-tuichu"></i>
          <span class="col_333">安全退出</span>
          <i class="icon iconfont icon-shangyiye-copy"></i>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  export default {
        data () {
            return {

        }
    },
    methods: {
      goPage: function (url) {
        this.$router.push({path: url});
      },

      //退出登录
      goLoginOut: function (url) {
        var that = this;
        DbsAlert.show({
          title: '提示',
          text: '您确定要退出吗？',
          clearBtnText: '稍后再说',
          btnText: '立即退出',
          onTap: function () {
            that.$post(that.$urlAll.log_out).then(function (response) {
              sessionStorage.clear();
              that.$router.push({path: url});

            })
          }
        });
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../style/common.css";
  .myInfo-header{
    width:100%;
    height: 1.8rem;
    position: relative;
    text-align: center;
    background: url("../../assets/image/myInfo_bg1.png") no-repeat;
    background-size: 100% 100%;
  }
  .myInfo-header .my-pic{
    width: 0.88rem;
    height: 0.88rem;
    line-height: 0.88rem;
    background: #FFFFFF;
    border:0.02rem solid #FFFFFF;
    position: relative;
    left: calc(50% - 0.44rem);
    top: 0.26rem;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
  }
  .myInfo-header .my-pic .myPic{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
  }
  .myInfo-header .my-nickname{
    width:100%;
    font-size: 0.15rem;
    color: #ffffff;
    position: absolute;
    bottom:0.29rem;
  }
  .myInfo-content{}
  .myInfo-content .myInfo-item{
    position: relative;
    height: 0.44rem;
    background: #FFFFFF;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 0.1rem 0 0.17rem;
  }
  .myInfo-content .myInfo-item:nth-child(odd){
    margin-top: 0.1rem;
    border-bottom:0.01rem solid #EEEEEE;
  }
  .myInfo-content .myInfo-list .iconfont{
    width: 0.25rem;
    height: 0.25rem;
    line-height:0.25rem;
    text-align: center;
    font-size: 0.18rem;
    color: #FFFFFF;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
  }
  .myInfo-content .myInfo-list .iconfont.icon-1{
    background: #00aaee;
  }
  .myInfo-content .myInfo-list .iconfont.icon-xinfeng{
    background: #00c192;
  }
  .myInfo-content .myInfo-list .iconfont.icon-qianbao{
    background: #feb415;
  }
  .myInfo-content .myInfo-list .iconfont.icon-shezhi{
    background: #00aaee;
  }
  .myInfo-content .myInfo-list .iconfont.icon-tuichu{
    background: #ff4444;
  }
  .myInfo-content .myInfo-list .iconfont.icon-shangyiye-copy{
    font-size: 0.3rem;
    color: #c9c9c9;
  }
  .myInfo-list span:nth-child(2){
    position: absolute;
    left: 0.52rem;
    line-height: 0.44rem;
  }

</style>
